<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 表格</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" icon="el-icon-plus" class="mr10" @click="add">添加</el-button>
                <!-- <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
                <el-select v-model="select_cate" placeholder="筛选条件" class="handle-select mr10">
                    <el-option key="1" label="活动日期" value="date"></el-option>
                    <el-option key="2" label="活动名称" value="name"></el-option>
                    <el-option key="3" label="需求人数" value="need"></el-option>
                </el-select>
                <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="search" @click="search">搜索</el-button> -->
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" @selection-change="handleSelectionChange">
               <!--  <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                 <el-table-column prop="active_name" label="活动名称" align="center" width='150' show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="banner" label="banner" align="center"  width="200">
                    <template slot-scope="scope">
                      <a :href="scope.row.banner"><img :src="scope.row.banner" alt="" style="width: 160px;height: 95px"></a>
                   </template>

                </el-table-column>

                <el-table-column prop="rule_con.rule_fate" label="需求人数" align="center ">
                </el-table-column>


                  <el-table-column prop="img_url" label="活动内容图" align="center"  width="200">
                    <template slot-scope="scope">
                      <a :href="scope.row.img_url"><img :src="scope.row.img_url" alt="" style="width: 160px;height: 95px"></a>
                   </template>

                </el-table-column>


                <el-table-column prop="friend_way" label="好友优惠" align="center" width='150' show-overflow-tooltip :formatter="fromFriend"><!--  -->
                  <!--   <template slot-scope="scope">
                        <div>{{scope.row.friend_way.way_name}}</div>
                    </template> -->
                </el-table-column>
                <el-table-column prop="self_way" label="完成者优惠" align="center" width='150' show-overflow-tooltip :formatter="fromSelf"><!--  -->
                </el-table-column>
                <el-table-column prop="wiped" label="免单金额限制" align="center" width="120"><!--  -->
                </el-table-column>
                <el-table-column prop="active_hits" label="参与人数" align="center ">
                </el-table-column>
                <el-table-column prop="active_share" label="分享次数" align="center">
                </el-table-column>
                 <el-table-column prop="active_seed" label="到店消费人数" align="center" width='120'>
                </el-table-column>
                <el-table-column prop="active_hall" label="堂食金额" align="center" width='120'>
                </el-table-column>
                  <el-table-column prop="active_time" label="活动日期" align="center" width="320" :formatter="fromUTime">
                </el-table-column>
                <el-table-column fixed='right' label="操作" align="center" width='200'>
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="title" :visible.sync="editVisible" width="70%" >
            <el-form ref="form" :model="form" label-width="120px">
                 <el-form-item label="活动名称">
                    <el-input v-model="form.active_name"></el-input>
                </el-form-item>
                <el-form-item label="活动日期">
                    <el-date-picker v-model="form.active_time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                 <el-form-item label="banner图">
                  <!--  <el-upload class="avatar-uploader" :action='$gretUrl+"admin/banner/upimg"' :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                         <img v-if="form.banner" :src="form.banner" class="avatar">
                         <i v-else class="el-icon-plus avatar-uploader-icon"></i>


                     </el-upload> -->
                  <el-upload
                    class="upload-demo"
                    :action='$gretUrl+"admin/banner/upimg"' 
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    name="banner"
                    multiple
                    :limit="1"
                    :file-list="bannerList"
                    list-type="picture">
                    <el-button size="small" type="primary">上传图片</el-button>
                  </el-upload>
                </el-form-item>

                <el-form-item label="活动类型">
                  <el-select v-model="form.theme_id" clearable placeholder="请选择">
                    <el-option v-for="item in themeData" :key="item.active_theme_id" :label="item.active_theme_name" :value="item.active_theme_id" :disabled="item.active_theme_id == 1 ? true:false"></el-option>
                  </el-select>
                </el-form-item>
                 <el-form-item label="活动内容图">

                  <el-upload
                    class="upload-demo"
                    :action='$gretUrl+"admin/banner/active_img"' 
                    :on-success="handleUploadSuccess"
                    :on-remove="handleRemoveMain"
                    name="img_url"
                    multiple
                    :limit="1"
                    :file-list="imgList"
                    list-type="picture">
                    <el-button size="small" type="primary">上传图片</el-button>
                  </el-upload>
                </el-form-item>

            
                <el-container v-if="form.theme_id == 2 " style="flex-direction: column;display: flex;"><!-- 多人活动 -->
                    <!--好友优惠 -->
                   <!--  <el-form-item label="被邀请方优惠">
                         <el-select v-model="form.friend_snap" clearable placeholder="请选择" >
                            <el-option v-for="item in couponList" :key="item.coupon_id" :label="'有效期：'+item.start+'至'+item.end+' 优惠：'+item.rule_name.replace(new RegExp(item.r_fate),item.rule_fate)+','+item.way_name.replace(new RegExp(item.w_fate),item.way_fate)" :value="item.coupon_id"> -->
                                <!-- <el-tooltip content="Top center" placement="top"></el-tooltip> -->
                          <!--   </el-option>
                          </el-select>
                      </el-form-item>
 -->
                    <!--分享者优惠 -->
<!-- 
                      <el-form-item label="邀请方优惠">
                         <el-select v-model="form.self_snap" clearable placeholder="请选择" >
                            <el-option v-for="item in couponList" :key="item.coupon_id" :label="'有效期：'+item.start+'至'+item.end+' 优惠：'+item.rule_name.replace(new RegExp(item.r_fate),item.rule_fate)+','+item.way_name.replace(new RegExp(item.w_fate),item.way_fate)" :value="item.coupon_id">
                            </el-option>
                          </el-select>
                      </el-form-item> -->

                    <el-form-item label="规则">
                 <el-select v-model="form.rule_id" clearable placeholder="请选择">
                    <el-option v-for="item in ruleList" :key="item.rule_id" :label="item.rule_name" :value="item.rule_id" :disabled="item.rule_id != 4 ? true:false">
                    </el-option>

                  </el-select>

                </el-form-item>
              <el-form-item label="邀请人数">
                  <el-input-number v-model="form.rule_need" :min="0" :precision=" form.rule_id  == 2 ? 2:0" :step="1" :disabled=" form.rule_id == 1 || form.rule_id == 3 ? true:false" @blur="showRule" @change="showRule"></el-input-number><!--  @focus="showRule" -->
                  <span class="skim">{{ruleShow}}</span>
              </el-form-item>

               <el-form-item label="好友优惠">
                 <el-select v-model="form.friend_way_id" clearable placeholder="请选择" >
                  <!--   <el-option key="0" label="无" value="0"></el-option> -->
                    <el-option v-for="item in wayList" :key="item.way_id" :label="item.way_name" :value="item.way_id" :disabled="item.way_id == wayList.length ? true:false">
                    </el-option>
                  </el-select>
              </el-form-item>
               <el-form-item label="好友优惠-参数">
                  <!-- <el-input-number v-model="form.way_fate" :min="0" :precision="2" :step="0.5"></el-input-number> -->
                      <el-input-number v-model="form.friend_snap" :min="0" :precision="2" :step="0.5" :max=" form.friend_way_id == 1 ? 10000:10" :disabled="form.friend_way_id > 0 ? false:true " @blur="showFriend" @change="showFriend"></el-input-number>
                       <span class="skim">{{friendShow}}</span>
              </el-form-item>

               <el-form-item label="分享者优惠">
                 <el-select v-model="form.self_way_id" clearable placeholder="请选择">
                    <el-option v-for="item in wayList" :key="item.way_id" :label="item.way_name" :value="item.way_id">
                    </el-option>
                  <!--   <el-option  :key="wayList.length+1" label="免单" :value="wayList.length+1">
                    </el-option> -->
                  </el-select>
              </el-form-item>
              <el-form-item label="最大免单金额" v-if="form.self_way_id == wayList.length">

                 <el-input-number v-model="form.wiped" :min="0" :precision="2" :step="0.5"></el-input-number>
                 <span class="skim">(*最大免单额度{{form.wiped}}元)</span>
              </el-form-item>
               <el-form-item label="分享者优惠-参数"  v-if="form.self_way_id < wayList.length">
                  <!-- <el-input-number v-model="form.way_fate" :min="0" :precision="2" :step="0.5"></el-input-number> -->
                      <el-input-number v-model="form.self_snap" :min="0" :precision="2" :step="0.5" :max=" form.self_way_id == 1 ? 10000:10" :disabled="form.self_way_id != '' ? false:true" @blur="showSelf" @change="showSelf"></el-input-number>
                      <span class="skim">{{ruleShow}},{{selfShow}}</span>
              </el-form-item>


                   <!-- <el-form-item label="需求人数">
                      <el-input-number v-model="form.need" :step="2" :min="0" ></el-input-number>
                   </el-form-item>
                    <el-form-item label="好友折扣">
                      <el-input-number v-model="form.friend_snap" :min="0" :precision="2" :step="0.1" :max="10"></el-input-number>
                    </el-form-item>
                    <el-form-item label="完成者折扣">
                      <el-input-number v-model="form.self_snap" :min="0" :precision="2" :step="0.1" :max="10"></el-input-number>
                    </el-form-item> -->
                </el-container>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog> 
    </div>
</template>

<script>
    export default {
        inject : ['reload'],
        name: 'basetable',
        data() {
            return {
                pickerOptions2: {
                  shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                      picker.$emit('pick', [start, end]);
                    }
                  }, {
                    text: '最近一个月',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                      picker.$emit('pick', [start, end]);
                    }
                  }, {
                    text: '最近三个月',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                      picker.$emit('pick', [start, end]);
                    }
                  }]
                },
                // url: './static/vuetable.json',
                tableData: [
                // {
                //     active_id:1,
                //     active_name:'邀请减免',
                //     active_time:['2018-11-01','2018-11-11'],
                //     // active_time:'2018-11-01 至 2018-11-11',
                //     banner:'static/img/lu1.png',
                //     active_hits:'968',
                //     active_share:'457',
                //     seed:'1198',
                //     hall:'18682',
                //     need:'3',
                //     friend_snap:'8.6',
                //     self_snap:'6',
                // }
                ],
                cur_page: 1,
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                editVisible: false,
                delVisible: false,
                form: {
                    active_name:'',
                    active_time:[],
                    banner:'',
                    theme_id:'',

                    // active_hits:'',
                    // active_share:'',
                    // seed:'',
                    // hall:'',

                },
                idx: -1,
                admininfo:JSON.parse(localStorage.getItem('ms_username')),
                total:1,
                title:'',

                /*主题*/
                themeData:[],
                /*规则*/
                ruleList:[],
                /*方案*/
                wayList:[],

                /*优惠券*/
                couponList:[],

                /*规则预览*/
                ruleShow:'',
                /*好友优惠*/
                friendShow:'',
                /*分享优惠*/
                selfShow:'',

                bannerList:[],
                imgList:[]

            }
        },
        created() {
            this.getData();
        },
        computed: {
            data() {
                return this.tableData.filter((d) => {
                    let is_del = false;
                    for (let i = 0; i < this.del_list.length; i++) {
                        if (d.active_time === this.del_list[i].active_time) {
                            is_del = true;
                            break;
                        }
                    }
                    if (!is_del) {
                        if(d.active_time.indexOf(this.select_word) > -1 ) {
                            return d;
                        }
                    }
                })
            }
        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getData();
            },
            // 获取 easy-mock 的模拟数据
            getData() {
                // 开发环境使用 easy-mock 数据，正式环境使用 json 文件
                // if (process.env.NODE_ENV === 'development') {
                //     this.url = '/ms/table/list';
                // };
                // this.$axios.get(this.url, {
                //     page: this.cur_page
                // }).then((res) => {
                //     this.tableData = res.data.list;
                // })
                // console.log(this.admininfo)
                this.$axios.get('admin/banner', {
                    params:{
                        aid: this.admininfo['admin_id'],
                        token: this.admininfo['token'],
                        page: this.cur_page
                    }
                }).then((res) => {
                     if(res.data.status == 0){
                        this.tableData = res.data.data.data;
                        this.total = res.data.data.total 
                    }else if(res.data.status == 3){
                     this.$router.push('login') 
                    }
                })

                /*主题*/
                 this.$axios.get('admin/banner/themelist', {
                    params:{
                        aid: this.admininfo['admin_id'],
                        token: this.admininfo['token'],
                        // page: this.cur_page
                    }
                }).then((res) => {
                    this.themeData = res.data.data;
                     console.log(res.data.data);
                    
                })

                /*优惠券*/
                 this.$axios.get('admin/banner/couponlist', {
                    params:{
                        aid: this.admininfo['admin_id'],
                        token: this.admininfo['token'],
                        // page: this.cur_page
                    }
                }).then((res) => {
                    this.couponList = res.data.data;
                     console.log(res.data.data);
                    
                })


                /*规则数据*/
                 this.$axios.get('admin/voucher/rulelist', {
                    params:{
                        aid: this.admininfo['admin_id'],
                        token: this.admininfo['token'],

                    }
                }).then((res) => {
                    this.ruleList = res.data.data;
                })

                /*方案数据*/
                 this.$axios.get('admin/voucher/waylist', {
                    params:{
                        aid: this.admininfo['admin_id'],
                        token: this.admininfo['token'],

                    }
                }).then((res) => {
                    this.wayList = res.data.data;
                })

            },
            search() {
                this.is_search = true;
                this.$axios.get('admin/banner/search', {
                    params:{
                        aid: this.admininfo['admin_id'],
                        token: this.admininfo['token'],
                        page: this.cur_page,
                        type: this.select_cate,
                        keyword:this.select_word
                    }
                }).then((res) => {
                    // this.tableData = res.data.data.data;

                    //  this.total = res.data.data.total
                    //  this.uid = res.data.data.uid
                    if(res.data.status == 0){
                        this.tableData = res.data.data.data;
                        this.total = res.data.data.total;

                    }else{
                        this.$message(res.data.msg)
                    }
                })


            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            add(){
                this.title = '添加'
                 this.form = {
                    active_name:'',
                    active_time:'' ,
                    banner:'',

                    theme_id:2,

                    rule_id:4,
                    rule_need:0,
                    friend_way_id:'',
                    friend_snap:0,
                    self_way_id:'',
                    self_snap: 0,
                    wiped:50,
                }
                
                this.editVisible = true;
                this.bannerList = []
                this.imgList = []
                this.showRule();
                this.showFriend();
                this.showSelf();
            },
            handleEdit(index,row) {
                this.title = '编辑'
                this.idx = index;
                const item = this.tableData[index];
                this.editVisible = true;
                this.form = {
                    active_id:item.active_id,
                    active_name:item.active_name,
                    active_time:[item.start,item.end],
                    banner:item.banner,
                    rule_id:item.rule_con.rule_id,
                    rule_need:item.rule_con.rule_fate,
                    friend_way_id:item.friend_con.way_id,
                    friend_snap:item.friend_con.way_fate,
                    self_way_id:item.rule_con.way_id,
                    self_snap:item.rule_con.way_fate,
                    theme_id:item.theme_id,
                    wiped:item.wiped,
                }
              this.bannerList = [{
                name: 'png',
                url: item.banner
              }]
              this.imgList = [{
                name: 'png',
                url: item.img_url
              }]
                
                this.showRule();
                this.showFriend();
                this.showSelf();

            },
            handleDelete(index, row) {
                this.idx = index;
                this.delVisible = true;
            },
            delAll() {
                const length = this.multipleSelection.length;
                let str = '';
                this.del_list = this.del_list.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].name + ' ';
                }
                this.$message.error('已删除');
                this.multipleSelection = [];
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 保存编辑
            saveEdit() {
                // console.log(this.form.active_time)
                for (var i = 0; i < this.form.active_time.length; i++) {
                    var d = new Date(this.form.active_time[i])
                    this.form.active_time[i] = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
                }
                if(this.form.friend_snap == ''){
                    this.form.friend_snap = '0'
                }
                if(this.form.self_way_id != 3){

                    this.form.wiped = ''
                }else{
                    this.form.self_snap = ''
                }
                     
                 if(this.title == '添加'){
                    // let date = new Date()
                  // this.tableData.push(this.form)
                  // this.total = this.tableData.length+1
                  // this.editVisible = false;
                    // this.form.active_time = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
                    
                    // this.$set(this.tableData, this.idx, this.form);
                    

                    //  this.$axios.post('admin/type/typeadd',{
                    //     aid: this.admininfo.admin_id,
                    //     token: this.admininfo.token,
                    //     data: this.form.type_name
                    // }).then((res) =>{
                    //     if(res.data.status == 0){
                    //         this.$message.success(`添加第 ${this.tableData.length} 行成功`);
                    //         this.reload()
                    //     }else{
                    //         this.$message(res.data.msg);
                    //     }
                    // }) 

                    this.$axios.post('admin/banner/add',{
                        aid:this.admininfo.admin_id,
                        token:this.admininfo.token,
                        data:this.form
                    }).then((res) =>{
                        if(res.data.status == 0){
                            this.$message.success('添加成功')
                            this.reload()
                        }else{
                            this.$message(res.data.msg)
                        }
                    })
                    

                }else if(this.title == '编辑'){
                    // this.$set(this.tableData, this.idx, this.form);
                    // this.editVisible = false;
                    // this.$message.success(`修改第 ${this.idx+1} 行成功`);

                    console.log(this.form)
                     this.$axios.post('admin/banner/up',{
                        aid: this.admininfo.admin_id,
                        token: this.admininfo.token,
                        data: this.form
                    }).then((res) =>{
                        if(res.data.status == 0){
                            this.$message.success(`修改成功`);
                            this.reload()
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })


                }
            },
            // 确定删除
            deleteRow(){
                // console.log(this.tableData[this.idx].active_id)
                // this.tableData.splice(this.idx, 1);

                // this.delVisible = false;
                this.$axios.get('admin/banner/del',{params:{
                        aid: this.admininfo.admin_id,
                        token: this.admininfo.token,
                        active_id:this.tableData[this.idx].active_id
                }}).then((res) =>{
                        if(res.data.status == 0){
                            this.$message.success(`删除成功`);
                            this.reload()
                        }else{
                            this.$message(res.data.msg);
                        }
                    })
            },
            fromUTime(row, column){
              // const arr = row[column.property]
                /* 这里的 if(arr === undefined)
                 * 是根据自己的需求，决定arr长度为0时的判断条件
                 * 可以和这个不同
                 */ 
                // if(arr === undefined){
                //     return '0'
                // } else {
                //     return arr.length
                // }

                // var date =  new Date(obj);
                // var y = 1900+date.getYear();
                // var m = "0"+(date.getMonth()+1);
                // var d = "0"+date.getDate();
                // return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length);
                return `${row.start} 至 ${row.end}`

            },
            fromFriend(row, column){
                return `无规则,${row.friend_way}`;
            },
            fromSelf(row, column){
                return `${row.rule},${row.self_way}`;
            },
            /*图片上传*/
             handleAvatarSuccess(res, file) {
                console.log(res);
                // this.imageUrl = URL.createObjectURL(file.raw);
                this.form.banner = res.data.data.src
            },
            beforeAvatarUpload(file) {
              const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
              const isLt2M = file.size / 1024 / 1024 < 2;

              if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
              }
              if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
              }
              return isJPG && isLt2M;
            },
               handleUploadSuccess(res, file) {
              // console.log('img',res)
              if (res.status == 0) {
                this.$message.success('上传成功')
                this.form.img_url = res.data.data.src
              }else {
                this.$message.error(res.msg)
              }
            },
            handleRemoveMain(){},
            showRule(){
                for(var i=0;i<this.ruleList.length;i++){
                    if(this.ruleList[i].rule_id == this.form.rule_id){
                        var index = new RegExp(this.ruleList[i].r_fate)
                        this.ruleShow = this.ruleList[i].rule_name.replace(index,this.form.rule_need);
                    }
                }
                
            },
            showFriend(){
                for(var i=0;i<this.wayList.length;i++){
                    if(this.wayList[i].way_id == this.form.friend_way_id){
                        var index = new RegExp(this.wayList[i].w_fate)
                        this.friendShow = '无规则,'+this.wayList[i].way_name.replace(index,this.form.friend_snap);
                    }
                }
            },
            showSelf(){
                for(var i=0;i<this.wayList.length;i++){
                    if(this.wayList[i].way_id == this.form.self_way_id){
                        var index = new RegExp(this.wayList[i].w_fate)
                        this.selfShow = this.wayList[i].way_name.replace(index,this.form.self_snap);
                    }
                } 
            }
            
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;

    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 320px;
    height: 178px;
  }
  .el-input__inner{
    width: 100% !important;
    max-width: 350px;
  }
  .el-select{
    width: 100%;
    max-width: 500px;
  }
  .skim{
    color: red;
    font-size: 12px;
  }
</style>
